html, body {
  margin: 0;
  height: 100%;
  font-family: Abel, sans-serif;
  color: #fff;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

body {
  background-image: url();
}

#logo {
  margin: 10px auto;
  width: 504px;
  color: white;
  text-align: center;
  font-family: 'Bowlby One SC', sans-serif;
  font-size: 82px;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));
}

#outer #canvas {
  margin: 0 0 24px 0;
  background-color: #000;
  border-radius: 15px;
  border: 10px solid #116d97;

          box-shadow: 0 5px 10px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.5);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.5);
}

#outer {
  width: 640px;
  margin: 0 auto;
}

#hud {
}

button {
  vertical-align: middle;
  border: 0;
  text-transform: uppercase;
  text-align: center;
  font-size: 28px;
  padding: 15px 15px;
  width: 4em;
          box-sizing: content-box;
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;

          border-radius: 5px;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
}

#buttons {
  float: left;
}

button {
  background-color: #fff;
  background-image: -webkit-gradient(linear, 0 0, 0% 100%,
                                     from(transparent),
                                     to(transparent),
                                     color-stop(92%, rgba(130, 215, 255, 1.0)),
                                     color-stop(51%, rgba(130, 215, 255, 0.4)),
                                     color-stop(50%, transparent));
  color: #116d97;
  
          text-shadow: 0 1px 0 #fff;
  -webkit-text-shadow: 0 1px 0 #fff;
     -moz-text-shadow: 0 1px 0 #fff;

          box-shadow: 0 5px 10px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.5);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.5);
}

button:hover {
  background-color: #d7f2ff;
          box-shadow: 0 5px 10px rgba(0,0,0,0.5), 0 0 15px #116d97;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.5), 0 0 15px #116d97;
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.5), 0 0 15px #116d97;
}

button:active,
button:focus {
  outline: 0;
  color: #fff;
  background-color: #116d97;
  background-image: -webkit-gradient(linear, 0 0, 0% 100%,
                                     from(transparent),
                                     to(rgba(130, 215, 255, 0.4)));

}

#info {
  float: right;
  font-size: 24px;
  text-shadow: 0 2px 5px #000;
  color: white;
}

footer {
  padding-top: 40px;
  font-size: 22px;
  clear: both;
  margin: 0 auto;
  width: 640px;
  text-align: center;
  opacity: 0.7;
}

footer a {
  color: yellow;
}

/* CSS idioms/hacks/workarounds */

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
